<template>
    <view class="video-capture">
        <view class="video-container" v-if="videoSrc">
            <video :src="videoSrc" id="myVideo" ref="videoRef" :loop="true" :controls="true"/>
        </view>
        <view class="btns">
            <button @click="chooseVideo">选择视频</button>
            <button @click="captureFrame">截取当前帧</button>
        </view>

        <img v-if="imgSrc" :src="imgSrc" style="width: 100%;" />

        <canvas v-show="false" canvas-id="captureCanvas" ref="canvasRef"></canvas>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { PlatformFactory } from './platform/PlatformFactory';

const platform = PlatformFactory.createPlatform();
const videoRef = ref<any>(null);
const canvasRef = ref<any>(null);
const videoSrc = ref('');
const duration = ref(0);
const currentTime = ref(0);

const imgSrc = ref('');

const chooseVideo = async () => {
    try {
        videoSrc.value = await platform.chooseVideo();
        await nextTick();
        const video = platform.getVideoContext(videoRef.value);
        platform.initVideoListener(videoRef.value, () => {
            duration.value = video.duration;
        });
    } catch (error) {
        uni.showToast({ title: '选择视频失败', icon: 'none' });
    }
};

const handleSliderChange = (e: any) => {
    const time = typeof e === 'object' ? e.detail.value : e;
    currentTime.value = time;
    platform.seekVideo(videoRef.value, time);
};

const captureFrame = async () => {
    const video = platform.getVideoContext(videoRef.value);
    console.log("video", video);

    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    if (ctx) {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      imgSrc.value = canvas.toDataURL('image/png');
      return
    }

    // 设置canvas尺寸与视频一致
    // canvas.width = video.videoWidth;
    // canvas.height = video.videoHeight;

    console.log("video size", video.videoWidth, video.videoHeight);

    // 绘制当前帧
    await new Promise(resolve=>{
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height, 0, 0, video.videoWidth, video.videoHeight);
        setTimeout(resolve, 300)
    }) 

    try {
        await platform.saveSnapshot(canvas);
        uni.showToast({ title: '截图成功', icon: 'success' });
    } catch (error) {
        uni.showToast({ title: '截图失败', icon: 'none' });
    }
};
</script>

<style scoped>
.video-capture {
    padding: 20rpx;
}

.video-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    margin-bottom: 20rpx;
}

.video-container video {
    width: 100%;
    height: 100%;
}

.controls {
    padding: 20rpx;
}

.btns {
    margin: 40rpx 0;
    display: flex;
    justify-content: center;
    gap: 20rpx;
}

.btns button {
    border: none;
    border-radius: 4px;
    background-color: #007aff;
    color: #fff;
    cursor: pointer;
    flex: 1;
}
</style>